<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
		<title>实时路况查询</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=IG6NWFU5qDEPKrUuX4wTYIZT"></script>
		<style>
			#container {
				height: 100%;
			}
			div#continer {
				width: 1190px;
				margin-left: auto;
				margin-right: auto;
			}
			div#header {
				width: 1190px;
				margin-top: 50px;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
			div#text {
				width: 350px;
				padding-top: 50px;
				float: left;
			}
			h1 {
				font-size: 25px;
			}
			h2 {
				font-size: 18px;
				color: red;
			}
		</style>
	</head>
	<?php
		include("conn.php");
		$sql1 = "SELECT ID,EW,WE,SN,NS FROM length";
		$query1 = mysql_query($sql1);
		$row1 = mysql_fetch_array($query1);
		$sql2 = "SELECT JingDu,WeiDu FROM info";
		$query2 = mysql_query($sql2);
		$row2 = mysql_fetch_array($query2);
	?>
	<body>
			<div id = "header"><h1>车辆排队长度检测系统</h1></div>
			<div id = "continer">
				<hr>
			<div id = "text">
				<h2>当前路口：<?php echo $row1["ID"]; ?></h2>
				<h2>由东往西排队长度为：<span id = "ew"><?php echo $row1["EW"]; ?></h2>
				<h2>由西往东排队长度为：<?php echo $row1["WE"]; ?></h2>
				<h2>由南往北排队长度为：<?php echo $row1["SN"]; ?></h2>
				<h2>由北往南排队长度为：<?php echo $row1["NS"]; ?></h2>
			</div>
			<div style="width:830px;height:510px;border:1px solid gray;" id = "container">
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var map = new BMap.Map("container");          // 创建地图实例
	var point = new BMap.Point(<?php echo $row2["JingDu"]; ?>, <?php echo $row2["WeiDu"]?>);  // 创建点坐标
	map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom();
	map.addControl(new BMap.NavigationControl());
	var marker=new BMap.Marker(point);
	map.addOverlay(marker);	
	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
	var m;
	m = setInterval("fun()",1000);
    function fun() {
		if (window.XMLHttpRequest)
		{
		  	xmlhttp=new XMLHttpRequest();
		}
		else
		{
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		{
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    	document.getElementById("text").innerHTML=xmlhttp.responseText;
		    }
		}
		xmlhttp.open("GET","select.php",true);
		xmlhttp.send();
    } 
</script>